
<template>
    <div class="searchPart">
      <div class="searchInput">
        <input class="inputPart" type="text" placeholder="请输入搜索关键词" v-model="searchContent">
        <button class="searchButton" @click="findIt">搜索</button>
      </div>
    </div>
</template>

<script>

export default {
  name: 'SearchPart',
  data(){
    return{
      searchContent: ''
    }
  },
  methods:{
    findIt(){
      this.$emit('findIt',this.searchContent)
    }
  }
}
</script>
   
<style scoped>
  .searchInput{
    width: 100%;
    margin-left: 10%;
  }
  .searchInput img{
    width: 30px;
    height: 30px;
    margin-left: 20px;
  }
  .inputPart{
    background:url('../assets/search.png') no-repeat 1px center;
    width:68%;
    height: 42px;
    font-size: 20px;
    line-height: 42px;
    background-color: #4b4b4b;
    /* border: 1px solid white; */
    color: white;
    border-radius: 50px;
    border: 1px solid white;
    background-size:2.5%;
    background-position: 1%;
    padding-left: 3.5%;
  }
  .inputPart:hover{
    border: 1px solid pink;
  }
  .searchButton{
    width: 8%;
    height: 44px;
    font-size: 20px;
    line-height: 42px;
    background-color: #4b4b4b;
    border: 1px solid white;
    color: white;
    border-radius: 50px;
    margin-left:0.3%;
    /* border-top-left-radius: 0;
    border-bottom-left-radius: 0; */
  }
  .searchButton:hover{
    width: 8%;
    height: 44px;
    font-size: 20px;
    line-height: 42px;
    background-color: #4b4b4b;
    border: 1px solid pink;
    color: pink;
    border-radius: 50px;
    margin-left:0.3%;
  }
</style>
